<template>
	<view class="setUp">
		<view class="infobox">
			
			<div class="fromItem">
				<view class="f_name">头  像：</view>
				<view class="f_content">
					<image :src="userinfo.avatarUrl" class="headpic"></image>
				</view>
			</div>
			<div class="fromItem">
				<view class="f_name">昵  称：</view>
				<view class="f_content">
					<input type="text" class="input" v-model="userinfo.nickname"/>
				</view>
			</div>
			<div class="fromItem" v-if="userinfo.phoneNumber">
				<view class="f_name">手机号：</view>
				<view class="f_content">
					<input type="text" class="input" v-model="userinfo.phoneNumber"/>
				</view>
			</div>
			<div class="fromItem" v-if="!userinfo.phoneNumber">
				<view class="f_name">手机号：</view>
				<view class="f_content">
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" type="primary">授权手机号码</button>
				</view>
			</div>
			<div class="fromItem">
				<view class="f_name">地  址：</view>
				<view class="f_content">
					<input type="text" class="input" v-model="userinfo.address"/>
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	import { getWechatPhone, getWxUserDetail } from '@/api/login/login'
	
	export default {
		data() {
			return {
				userinfo:{}
			};
		},
		onShow() {
			// 自动加载
			this.loadUserInfo();
		},
		methods: {
			loadUserInfo() {
				let userInfoJson = uni.getStorageSync("userInfo");
				if (userInfoJson) {
					this.userinfo = JSON.parse(userInfoJson);
				}
			},
			
			getPhoneNumber (e) {
				console.log(e, "获取手机号码返回")
				let userInfo = uni.getStorageSync("userInfo");
				let userInfoJson = JSON.parse(userInfo);
				let params = {
					code: e.detail.code,
					openId: userInfoJson.openId
				};
				getWechatPhone(params).then(res2 => {
					if (res2.code == '200') {
						// 刷新用户信息重新设置缓存
						let userParams = { openId: userInfoJson.openId }
						getWxUserDetail(userParams).then(user => {
							if (user.code == '200') {
								uni.setStorageSync('userInfo', user.data);
							}
						})
						uni.hideLoading();
						// 重定向页面
						uni.redirectTo({
							url:'/pages/my/setUp/setUp'
						})
					} else {
						uni.hideLoading();
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../../static/style/mixin.scss';

	.setUp {
		@include bg2;
		padding-top: 20upx;

		.infobox {
			@include w_box;

			.fromItem {
				@include ends;
				border-bottom: 1upx solid #00000030;
				min-height: 100upx;
				.f_content{
					.headpic{
						width: 150upx;
						height: 150upx;
						border-radius: 50%;
					}
					.input{
						text-align: right;
						width: 400upx;
						height: 50upx;
					}
					.textArea{
						width: 400upx;
						padding: 20upx;
						height: 240upx;
					}
				}
			}

			.fromItem:last-child {
				border-bottom: none;
			}
		}

		.determine {
			width: 720upx;
			height: 100upx;
			@include cc;
			border-radius: 10upx;
			background-image: linear-gradient(90deg, aqua, #f89);
			margin: 20upx auto;
		}
	}
</style>
